<template>
	<view class="content">
		<view class="banner">
			<swiper class="screen-swiper square-dot" circular="true" autoplay="true"
				interval="5000" duration="500">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<image :src="item.img" mode="aspectFill"></image>
					<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
				</swiper-item>
			</swiper>
		</view>
		<view class="cont">
			
			<!-- <view class="index_qiang">
				<view class="flex">
					<view class="left flex flex-align">
						<view class="one">￥</view>
						<view class="two">10</view>
						<view class="tree">
							<view class="wenzi">满100可用</view>
							<view class="wenzi">新会员注册福利</view>
						</view>
					</view>
					<view class="right">
						<image src="/static/home/index_an.png" mode=""></image>
					</view>
				</view>
				
			</view> -->
			
			<view class="miaosha">
				<view class="title flex flex-align flex-center" style="margin-top: 50rpx;">
					<image src="/static/yingyang/zhishi.png" mode=""></image>
				</view>
			</view>
			<view class="baoKuan ">
				<view class="flex flex-align flex-end allIn" @click="goUrl('/pages/yingyang/zhishilist')">
					查看全部>>
				</view>
				<view class=" flex flex-line">
					<view class="list" v-for="(item,index) in dataList1" :key="index" @click="goUrl('/pages/yingyang/zhishidetails?id='+item.id)">
						<view class="chanpin">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="wenzi flex flex-bt">
							<view class="left text_two">{{item.name}} <text style="color: #b0e096;margin-left: 6rpx;">点击查看>> </text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="miaosha">
				<view class="title flex flex-align flex-center" style="margin-top: 50rpx;">
					<image src="/static/yingyang/shipu.png" mode=""></image>
				</view>
			</view>
			<view class="baoKuan ">
				<view class="flex flex-align flex-end allIn" @click="goUrl('/pages/yingyang/shipu')">
					查看全部>>
				</view>
				<view class=" flex flex-line">
					<view class="list" v-for="(item,index) in dataList2" :key="index" style="padding-bottom: 10rpx;" @click="goUrl('/pages/yingyang/shipudetails?id='+item.id)">
						<view class="chanpin">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="wenzi flex flex-bt text_one">
							<view class="left text_one" style="height: auto;margin-bottom: 10rpx;">{{item.name}}</view>
						</view>
						<view class="miaoshu">
							<text v-for="(itt,its) in item.mark" :key="its" v-if="its<=1">{{itt}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 120rpx;"></view>
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				title: 'Hello',
				dataList1:[],
				dataList2:[],
				banner:[]
			}
		},
		onLoad() {
			this.getList()
			this.getBanner()
			uni.setNavigationBarTitle({
				title: '健康知识'
			})
		},
		onReady() {
			uni.hideTabBar();
		},
		methods: {
			goUrl(e){
				this.tui.href(e)
			},
			getBanner(){
				let that = this
				that.tui.request("api.nutrition/banner", "POST", {}, false, false, true).then((res) => {
					console.log(res)
					if(res.code==1){
						that.banner = res.data.banner_j
						
					}
				}).catch((res) => {
					that.is_btn = false
				})
			},
			getList(){
				let that = this
				that.tui.request("api.nutrition/article", "POST", {}, false, false, false).then((res) => {
					console.log(res)
					if(res.code==1){
						that.dataList1 = res.data.knowledge
						that.dataList2 = res.data.recipe
					}
				}).catch((res) => {
					that.is_btn = false
				})
			}
		}
	}
</script>

<style lang="less">
	page{background: #adcf88;}
	.banner{
		height: 762rpx;
		width: 750rpx;
		margin-bottom: 30rpx;
		// margin: -200rpx auto 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.screen-swiper{
			height: 100%;
			width: 750rpx;
			min-height: 100% !important;
			image{
				width: 750rpx;
				height: 762rpx;
				border-radius: 10rpx;
			}
		}
	}
	.baoKuan{background: #dfeec9;border-radius:10rpx;border: 1px solid #fff;box-shadow: 1px 1px 7px 1px rgba(255, 255, 255, 0.5);margin-top: -70rpx;padding: 60rpx 20rpx 0rpx;position: relative;
		.allIn{position: absolute;top: 10rpx;right: 20rpx;color: #76bd4d;}
		.list{width: 310rpx;background: #73bc4b;margin-right: 20rpx;margin-bottom: 30rpx;border-radius: 10rpx;position: relative;border: 1px solid #73bc4b;
			.chanpin{width: 310rpx;height: 250rpx;margin: 0 auto;
				image{width: 306rpx;height: 250rpx;border-radius: 10rpx;}
			}
			.miaoshu{
				text{display: inline-block;margin-left: 20rpx;font-size: 24rpx;background: #9dcf7c;color: #fff;padding: 4rpx 10rpx;border-radius: 6rpx;margin-bottom: 10rpx;}
			}
			.wenzi{margin: 10rpx;
				.left{color: #fff;font-size: 24rpx;height: 66rpx;}
				.right{color: #fdf13c;align-items: baseline;
					.fuhao{font-size: 24rpx;}
					.price{font-weight: bold;font-size: 38rpx;}
				}
			}
			.btns{position: absolute;bottom: -30rpx;left: 0;width: 100%;text-align: center;
				image{width: 154rpx;height: 50rpx;}
			}
		}
		.list:nth-child(2n){margin-right: 0;}
	}
	.miaosha{margin: 30rpx 0;
		.title{margin-bottom: 30rpx;
			image{width: 236rpx;height: 79rpx;z-index: 111;}
		}
	}
	.cont{padding:0 30rpx;}
	.index_qiang{background: url('/static/home/index_yhq.png') no-repeat;background-size: 100% 100%;margin: 20rpx 0;padding:40rpx 0 40rpx 40rpx;position: relative;
		.left{width: 450rpx;background: linear-gradient(to right, #61ae3d, #397824); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
			  -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
			  -webkit-text-fill-color: transparent;/*给文字设置成透明*/
			.one{font-size: 24rpx;padding-top: 20rpx;}
			.two{font-size: 74rpx;font-weight: bold;}
			.tree{
				.wenzi{font-size: 24rpx;padding-left: 10rpx;margin-bottom: 6rpx;}
			}
		}
		.right{width: 225rpx;padding:15rpx 0 0 70rpx ;position: absolute;top: 50rpx;right: 40rpx;
			image{width:170rpx;height: 48rpx;}
		}
		
	}
	
</style>
